<template>
  <div class="app-container">

    <div class="filter-container">
      <!--<el-input v-model="params.prefix" placeholder="前缀" style="width: 200px;" class="filter-item"
                      @keyup.enter.native="fetchData"/>-->
      <el-select v-model="params.status" class="filter-item" placeholder="状态" @keyup.enter.native="fetchData">
        <el-option label="入库" value="0">入库</el-option>
        <el-option label="出库" value="1">出库</el-option>
      </el-select>
      <el-input
        v-model="params.name"
        placeholder="商品标识"
        style="width: 200px;margin-left: 15px"
        class="filter-item"
        @keyup.enter.native="fetchData"
      />

      <el-button
        class="filter-item"
        style="margin-left: 20px;"
        type="primary"
        icon="el-icon-search"
        @click="fetchData"
      >
        搜索
      </el-button>
      <el-button type="success" icon="el-icon-warning-outline" class="filter-item" @click="resetForm()">重置
      </el-button>

      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="warning"
        icon="el-icon-edit"
        @click="batchPrice(0)"
      >
        批量生成价格
      </el-button>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
      :header-cell-style="tableHeaderStyle"
    >
      <el-table-column label="序号" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.forId }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="商品类别">
        <template slot-scope="scope">
          {{ scope.row.template }}
        </template>
      </el-table-column>
      <el-table-column label="商品标识">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column> <el-table-column label="入库价">
        <template slot-scope="scope">
          {{ scope.row.enterMoney }}
        </template>
      </el-table-column> <el-table-column label="出库价">
        <template slot-scope="scope">
          {{ scope.row.leaveMoney }}
        </template>
      </el-table-column>

      <el-table-column label="当前库房">
        <template slot-scope="scope">
          {{ scope.row.room }}
        </template>
      </el-table-column>
      <el-table-column label="当前状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status | statusFiller }}
        </template>
      </el-table-column>
      <el-table-column label="操作时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.updateTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button type="text" @click="ewmForDetail(scope.row.id)">详情
            </el-button>
            <el-button type="text" @click="batchPrice(1,scope.row)">编辑
            </el-button>
            <el-button type="text" @click="deleteDataModel(scope.row.id)">删除
            </el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.page" :limit.sync="params.pageSize" @pagination="fetchData" />

    <!--二维码详情-->
    <el-dialog
      width="70%"
      title="详情"
      :visible.sync="showDialogEwmDetails"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dataGunForm"
        :model="ewmDetailsData"
        label-position="right"
        label-width="120px"
        style="margin-left:50px;margin-right: 50px"
      >
        <el-form-item label="前缀:" class="detailItem">
          {{ ewmDetailsData.prefix }}
        </el-form-item>
        <el-form-item label="标识:" class="detailItem">
          {{ ewmDetailsData.handle }}
        </el-form-item>
        <el-form-item label="商品类别:" class="detailItem">
          {{ ewmDetailsData.template }}
        </el-form-item>
        <el-form-item label="详细信息:" class="detailItem">
          <div v-for="(item,index) in ewmDetailsData.list" :key="index" class="detailBox">
            <div v-if="item.name" class="forNaLeft">{{ item.name }}</div>
            <div v-else class="forName borLeft" style="text-align: left" v-html="item.key">{{ item.key }}</div>

            <div v-if="item.type==1" class="forName borLeft">
              <img v-for="(imgItem,index) in item.dataList" :key="imgItem" :src="imgItem" style="max-width: 100%;width: 200px;margin: 10px 10px 10px 0;">
            </div>
            <div v-else class="forName borLeft" v-html="item.value">
              {{ item.value }}
            </div>

            <div style="clear: both" />
          </div>
        </el-form-item>
        <el-form-item class="detailItem">
          <div class="forUpdate" @click="showUpdate(ewmDetailsData)">更新</div>
        </el-form-item>
      </el-form>
      <!--  <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showDialogEwmDetails=false">
                    确定
                </el-button>
            </div>-->
    </el-dialog>
    <!-- 批量生成价格-->
    <el-dialog
      width="70%"
      :title="goodsTitle[goodsIndex]"
      :visible.sync="dialogPriceVisible"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="priceData"
        label-position="right"
        label-width="80px"
        style="margin-left:50px;margin-right: 50px;margin-top: 30px"
      >
        <el-form-item label="商品类别" prop="template">
          <el-select v-model="priceData.template" class="filter-item" placeholder="请选择商品类别" style="width: 100%" :disabled="goodsFlag">
            <el-option v-for="(item,index) in goodsList" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="入库价" prop="enterMoney">
          <el-input v-model="priceData.enterMoney" type="number" show-word-limit />
        </el-form-item>

        <el-form-item label="出库价" prop="leaveMoney">
          <el-input v-model="priceData.leaveMoney" type="number" show-word-limit />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelPrice">
          取消
        </el-button>
        <el-button type="primary" @click="savePrice">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { download, get, post } from '../../utils/request'
import Pagination from '@/components/Pagination'
import { trustPrefixIdList } from '../../api/index'
import { typeMap, statusMap } from '../../utils/constant'
export default {
  name: 'MarkManage',
  components: { Pagination },
  filters: {
    statusFiller(status) {
      return typeMap[status]
    },
    typeFiller(type) {
      return typeMap[type]
    },
    nameFillter(list) {
      var name
      list.forEach((item, index) => {
        if (item.name == '产品名称' || item.name == '商品名称' || item.key == 'Product_name' || item.key == 'Product_Name') {
          name = item.value
        }
      })
      return name
    }

  },

  data() {
    var checkPrice = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入出库价'))
      } else {
        callback()
        /*   if(this.priceData.enterMoney){

                        if(value < this.priceData.enterMoney){
                            return  callback(new Error("出库价应不小于入库价"))
                        }else{
                            callback()
                        }
                     }else{
                        callback()
                    }*/
      }
    }
    var enterMoney = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入入库价'))
      } else {
        callback()
        /*   if(this.priceData.leaveMoney){
                        if(value > this.priceData.leaveMoney){
                            return  callback(new Error("入库价应不大于出库价"))
                        }else{
                            callback()
                        }
                     }else{
                        callback()
                    }*/
      }
    }

    return {
      list: null,
      listLoading: true,
      total: 10,

      checkedChoose: false,
      dialogFormVisible: false,
      isModify: false,
      idenData: {},
      columns: [],
      showDialogEwmDetails: false,
      ewmDetailsData: {},
      tableHeaderStyle: {
        'background': '#f4f4f4',
        'color': '#000'
      },
      params: {
        page: 1,
        pageSize: 10,
        status: '0'
      },
      ewmId: '',
      // 标识前缀列表
      idenList: [],
      dataType: [{ type: 1, name: '字符串' }, { type: 2, name: '数字' }], //, {type: 3, name: "图片"}
      mandatoryType: [{ id: 0, name: '是' }, { id: 1, name: '否' }],
      enterpriseDataId: null,
      // 价格
      dialogPriceVisible: false,
      priceData: {},
      rules: {
        enterMoney: [{ required: true, validator: enterMoney, trigger: 'blur' }],
        leaveMoney: [{ required: true, validator: checkPrice, trigger: 'blur' }],
        template: [{ required: true, message: '请选择商品类别', trigger: ['blur', 'change'] }]
      },
      goodsList: [],
      goodsFlag: false,
      goodsTitle: ['批量生成价格', '编辑'],
      goodsIndex: 0

    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    this.$nextTick(() => {
      $('.pswp').css({ 'z-index': '2500' })
    })
  },
  methods: {
    fetchData() {
      this.listLoading = true
      get(
        '/api/codeList.json',
        this.params
      ).then(response => {
        // console.log(response);
        this.total = response.total
        response.rows.forEach((item, index) => {
          item.forId = index + 1
          item.describes = JSON.parse(item.describes)
        })
        this.list = response.rows
        this.listLoading = false
      })
    },

    prefixChange(value) {
      this.idenData.enterpriseDataId = value
      // console.log(this.idenData.enterpriseDataId);
    },
    ewmDetails(id) {
      get(
        '/api/codeDetail.json',
        { id: id }
      ).then(response => {
        // console.log(response);
        response.list.forEach(item => {
          console.log(item)
          // type 0 正常 1 图片  2url 3标识
          if (item.value) {
            if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item.value)) {
              item.type = 1
              item.dataList = item.value.split(',')
            } else if (/[a-zA-z]+:\/\/[^\s]*/.test(item.value)) {
              item.type = 2
            } else if (item.value.startsWith('86.122.')) {
              item.type = 3
              item.dataList = item.value.split(',')
            } else {
              item.type = 0
            }
          } else {
            item.type = 0
          }
        })

        this.ewmDetailsData = response
        this.$previewRefresh()
      })
    },
    ewmForDetail(id) {
      this.showDialogEwmDetails = true
      this.ewmId = id
      this.ewmDetails(id)
    },
    showUpdate() {
      if (this.ewmId) {
        get(
          '/api/codeUpdate.json',
          { id: this.ewmId }
        ).then(response => {
          console.log(response)
          if (response) {
            response.list.forEach(item => {
              console.log(item)
              // type 0 正常 1 图片  2url 3标识
              if (item.value) {
                if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item.value)) {
                  item.type = 1
                  item.dataList = item.value.split(',')
                } else if (/[a-zA-z]+:\/\/[^\s]*/.test(item.value)) {
                  item.type = 2
                } else if (item.value.startsWith('86.122.')) {
                  item.type = 3
                  item.dataList = item.value.split(',')
                } else {
                  item.type = 0
                }
              } else {
                item.type = 0
              }
            })
            this.ewmDetailsData = response
            this.$message({
              type: 'success',
              message: '更新成功!',
              customClass: 'zZindex'
            })
            this.$previewRefresh()
          }
        })
      }
    },
    deleteDataModel(id) {
      this.$confirm('此操作将永久删除该二维码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post(
          '/api/deleteCode.json', // 待接的删除
          { id: id }
        ).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    deleteColumn(index) {
      this.columns.splice(index, 1)
    },
    addCloumn() {
      this.columns.push({ mandatory: 1, dataType: 1 })
      //  console.log(this.columns);
    },

    // 根据返回的数字变换为类型
    getTypeString(type) {
      let name = ''
      this.dataType.forEach(item => {
        if (item.type == type) {
          name = item.name
        }
      })
      return name
    },

    batchPrice(num, row) {
      this.dialogPriceVisible = true
      this.goodsIndex = num
      if (num == 1) {
        this.goodsFlag = true
        this.priceData = {
          id: row.id,
          template: row.template,
          enterMoney: row.enterMoney,
          leaveMoney: row.leaveMoney
        }
      } else {
        this.priceData = {}
        this.goodsFlag = false
        this.fetchGoodsType()
      }
      this.$nextTick(() => {
        // 初始化省市县数据
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 获取商品类别
    fetchGoodsType(temp) {
      get(
        '/api/template.json',
      ).then(response => {
        console.log(response)
        if (response) {
          this.goodsList = response
        }
      })
    },
    cancelPrice() {
      this.$refs['dataForm'].clearValidate()
      this.dialogPriceVisible = false
    },
    savePrice() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          post('/api/changeMoney.json', this.priceData).then(res => {
            this.dialogPriceVisible = false

            if (this.goodsIndex == 0) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              })
            }

            this.fetchData()
          }).catch(() => {

          })
        }
      })
    },

    resetForm() {
      this.params = {
        page: 1,
        pageSize: 10
      }
      this.$nextTick(() => {
        this.fetchData()
      })
    }
  }
}
</script>
<style scoped>
    /deep/ .el-message .el-message--error {
        z-index: 2999 !important;
    }

    /deep/ .el-dialog {
        position: relative;
        margin: 0 auto 56px;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 65%;
    }

    /deep/ .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
        border: 1px solid #DCDFE6 !important;
        border-color: #DCDFE6 !important;
    }

    /deep/ .el-button--primary:focus, .el-button--primary:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #FFF;
    }

    .app-container {
        background: #fff;
        padding: 20px;
    }

    .filter-container {
        text-align: left;
        margin-bottom: 20px;
    }

    .btnItem {
        background: rgba(0, 0, 0, 0);
        border: none;
    }

    label {
        display: inline-block;
        margin-bottom: 2px;
    }

    @media only screen and (max-width: 1680px) {
        .itemBtn {
            display: block;
            margin: 2px auto;
        }
    }

    /deep/ .el-form-item.detailItem {
        margin-bottom: 2px;
    }
    /deep/ .el-form-item {
        margin-bottom: 22px;
    }

    /deep/ .el-table {
        width: 100%;
    }

    /deep/ .pagination-container {
        background: #fff;
        padding: 32px 16px;
        width: 96%;
    }

    /deep/ .el-checkbox__label {
        display: inline-block;
        padding-right: 10px;
        line-height: 19px;
        font-size: 16px;
        float: left;
    }
    /deep/.el-dialog__body {
        padding: 0 10px 30px 10px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }
    .detailBox{
        width: 100%;
        height: auto;
    }
    .detailBox:nth-child(odd){
        background-color: #fff;
        border: 1px solid #eee;
    } .detailBox:nth-child(even){
        border: 1px solid #eee;
      }

    .forNaLeft{
        width: 15%;
        line-height: 25px;
        font-size: 14px;
        text-align: center;
        float: left;
    }
    .forName{
        width: 80%;
        line-height: 25px;
        font-size: 14px;
        text-align: left;
        float: left;
        padding-left: 2%;
    }
    .borLeft{
        border-left: 1px solid #eee;
    }
    .forUpdate{
        width: 50px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        text-align: center;
        font-size: 14px;
        background-color: #00affb;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px;
    }
    .zZindex {
        z-index: 3000 !important;
    }

    /deep/.pswp{
        z-index: 3005!important;
    }
</style>

